


showPage()

/**
 * 页面显示
 */
function showPage() {
  $.ajax({
    url: "https://xiongmaoyouxuan.com/api/tab/1?start=0",
    type: "get",
    success(res) {
      if (res.code === 200) {
        hotShopOnload(res.data)
        dailyOnload(res.data)
        bannerOnload(res.data)
        swiperMove()
      }
    },
  })
}



/**
 * 热销商品区域渲染————tab区
 * 由于html没规划好（他的布局有点反人类），导致渲染代码比较繁琐
 * */
function hotShopOnload(data) {
  for (var key in data) {
    if (key === 'gridsV2') {
      // console.log(key,res.data[key])         
      let hotData = data[key]
      hotData.forEach((hotItem, index) => {

        if (index === 0) { // 三条数据不在我的同一个html容器里
          // var columnId = hotItem.url.slice(hotItem.url.indexOf('=')+1)// 获取column id 存储到localStorage，

          let bannerStr = `
            <div class="hot-shop" onclick="goToTileList(${hotItem.url.slice(hotItem.url.indexOf('=')+1)})">
              <h3>${hotItem.title}</h3>
              <p class="prompt">${hotItem.text}</p>
              <img src="${hotItem.imageUrl}" alt="专题图">
            </div>
          `

          let navStr = `
            <li  onclick="goToTileList(${hotItem.url.slice(hotItem.url.indexOf('=')+1)})">${hotItem.title}</li>
          `

          $('.nav-wrap ul').append(navStr)
          $('.right').prepend(bannerStr)
          
        } else if (index === 1) {
          // var columnId = url.slice(url.indexOf('=')+1) // 获取column id 存储到localStorage，
         
          let bannerStr = `
          <div class="b-right" onclick="goToTileList(${hotItem.url.slice(hotItem.url.indexOf('=')+1)})">
            <h3>${hotItem.title}</h3>
            <p>${hotItem.text}</p>
            <span class="span-btn">Go</span>
            <img src="${hotItem.imageUrl}" alt="专题图">
          </div>
          `

          let navStr = `
            <li  onclick="goToTileList(${hotItem.url.slice(hotItem.url.indexOf('=')+1)})">${hotItem.title}</li>
          `

          $('.nav-wrap ul').append(navStr)
          
          $('.bottom').prepend(bannerStr)

        } else {
          // var columnId = url.slice(url.indexOf('=')+1) // 获取column id 存储到localStorage，
         
          let bannerStr = `
          <div class="b-left" onclick="goToTileList(${hotItem.url.slice(hotItem.url.indexOf('=')+1)})">
            <h3>${hotItem.title}</h3>
            <p>${hotItem.text}</p>
            <span class="span-btn">Go</span>
            <img src="${hotItem.imageUrl}" alt="专题图">
          </div>
          `

          let navStr = `
            <li onclick="goToTileList(${hotItem.url.slice(hotItem.url.indexOf('=')+1)})">${hotItem.title}</li>
          `

          $('.nav-wrap ul').append(navStr)
          $('.bottom').prepend(bannerStr)
        }
      })

    }
  }
}

/**
 * 每日精选渲染
 */
function dailyOnload(data) {
  for (var key in data) { // 遍历返回的数据
    if (key === 'items') { // 根据data的对象名，判断拿到我要的数据
      let list = data[key].list // 拿到渲染数据 是一个数组
      let showList = list.slice(0, 16) // 每次渲染16条
      showList.forEach(listItem => {

        let priceStr = String(listItem.price) // 价格只有一个数据，转成字符串处理
        let priceStrong = priceStr.slice(0, priceStr.indexOf('.')) // 第一个截取到 . 之前
        let digit = priceStr.slice(priceStr.indexOf('.')) // 从 . 截取到最后
    
        let str = `
        <!-- 一条商品 -->
        <li class="show-item" onclick="goToList(${listItem.id})">
          <div class="show-img">
            <img src="${listItem.image}" alt="">
          </div>
  
          <div class="show-msg">
            <div class="show-title">
              ${listItem.title}
            </div>
  
            <div class="show-keyword">
              <span class="keyword taobao">淘宝</span>
              <span class="keyword">${listItem.keywords}</span>
              <span class="keyword free-postage">包邮</span>
            </div>
  
            <div class="show-foot">
              <div class="left">  
                <span class="price">
                  <span class="price-tag">￥</span>
                  <span class="price-strong">${priceStrong}</span>
                  <span class="digit">${digit}</span>
                </span>
                <span class="sale-num">${listItem.saleNum}万人已买</span>
              </div>
              
              <span class="coupon-value">${listItem.couponValue}</span>
            </div>
          </div>
        </li>
        `
        $('.show-list').append(str)
      })
    }
  }
}

/**
 * 加载轮播图  
 *  */
function bannerOnload(data) {
  if(data.banners.length){
    addBanners(data.banners)
  }else{
    // 自定义banner
    let setBanners = [
      './static/image/banner1.png',
      './static/image/banner2.png',
      './static/image/banner3.png'
    ]
   addBanners(setBanners)
  }

  /**
   * 添加banner
   */
  function addBanners(bannersList){
    let bannerStr = ''
    bannersList.forEach(banner=> {
      bannerStr += `
        <div class="swiper-slide">
          <img src="./static/image/banner1.png" alt="">
        </div>
      `
     $('.swiper-wrapper').html(bannerStr)

    })
  }

 
}

/**
 * swiper运动函数
 */
function swiperMove(){
  let mySwiper = new Swiper('.swiper-container', {
    loop: true, // 循环模式选项
    autoplay: {
      delay: 4000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
    }, // 自动播放

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
}

/**
 * 跳转页面 ———— 每日精选
 * 字符串拼接dailyOnload()中，给li添加的点击事件
 */
 function goToList(id){
   console.log(id)
  $.ajax({
    type:'get',
    url: 'https://xiongmaoyouxuan.com/api/detail',
    data: {
      id
    },
    success(res){
      if(res.code === 200){
      //  location.href = `http://xiongmaoyouxuan.com/?r=share#/item/${id}?`
      // let listShopMsg = JSON.parse(localStorage.getItem('LISTMSG')) || [] 
      localStorage.setItem('LISTDETAILSID',id)
      window.open('./html/list.html','_blank')
      }
    },
   
  })
}

/**
 * 跳转页面 ———— tab区域
 * 字符串拼接中，给tab区域添加的点击事件
 */
function goToTileList(columuId) {
  console.log(columuId)
  $.ajax({
    type:'get',
    url: 'https://xiongmaoyouxuan.com/api/column',
    data: {
      columuId
    },
    success(res){
      if(res.code === 200){ 
      console.log(res.data)
      localStorage.setItem('COLUMNID',columuId)
      window.open('./html/tab.html')
      }
    },
   
  })
}


/**
 * 回到顶部
 */
backTop()
function backTop() {
  var goTop = document.querySelector('.back-top') 
  window.onscroll = function () {
    var top = document.documentElement.scrollTop || document.body.scrollTop
  
    if(top > 500){
      goTop.style.display = 'block'
      goTop.addEventListener('click',()=>{
        document.body.scrollTop = document.documentElement.scrollTop = 0
      }) 
    }else{
      goTop.style.display = 'none'
    }
  }


}

// bannerToList()
/**
 * 录播图跳转
 */
function bannerToList() {
  document.querySelector('.swiper-wrapper').onclick = function () {
    $.ajax({
      url: 'https://xiongmaoyouxuan.com/api/tab/1?start=0',
      type: 'get',
      success(res){
        if(res.code == 200){
          console.log(res.data) // 拿不到banner数据
        }
      }
    })
  }
}

/**
 * 加载更多
 */
loadMore()
function loadMore() {
  let btn = document.querySelector('.more-msg')
  btn.onclick = function() {
    $.ajax({
      tpey: 'get',
      url: `https://xiongmaoyouxuan.com/api/tab/1/feeds?start=${20*2}&sort=0`,
      success:function(res){
        if(res.code == 200){
          console.log(res.data)
          dailyOnload(res.data)
        }
      }
    })
  }
}

/**
 * 注册、登录
 */
userInfo()
function userInfo(){
  let span = document.querySelector('.login-msg span')
  let p = document.querySelector('.login-msg p')
  let msgwrap = document.querySelector('.msgwrap')
  let loginMsg = document.querySelector('.login-msg')
  let rBtn = document.querySelector('.register')
  let lBtn = document.querySelector('.login')
  let username = localStorage.getItem('USERNAME')
  console.log(username)
  rBtn.onclick = function(){
    location.href = './html/register.html'
  }
  lBtn.onclick = function(){
    location.href = './html/login.html'
  }

  if(username){
    console.log(username)
    p.innerHTML = `你好鸭，${username}！`
  //  msgwrap.style.opcity = 0
   
  //  loginMsg.style.opcity = 1
   msgwrap.style.display = 'none'
   loginMsg.style.display = 'block'
  }
  
  /**
   * 退出登录
   */

  span.onclick = function(){
    localStorage.removeItem('USERNAME')
    // msgwrap.style.opcity = 1
    // loginMsg.style.opcity = 0
    loginMsg.style.display = 'none'
    msgwrap.style.display = 'block'
  }
}